<template>
  <div class="xsyqms-wrap">
    <div class="top-wrap">
      <Card>
        <e-line :key="elineId" :id="elineId" :chartData="lineData" />
      </Card>
      <Button
        type="warning"
        size="small"
        class="play-btn"
        :loading="playLoading"
        @click="handleElinePlay"
        >
        曲线播放
      </Button>
    </div>
    <div class="bottom-wrap">
      <Card>
        <e-line :key="zbId" :id="zbId" :chartData="zbData" v-if="zbData" />
      </Card>
    </div>
    <Spin fix v-show="showLoading">加载中...</Spin>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import { merge, each, head, last, concat, isEmpty } from 'lodash'
import { nanoid } from 'nanoid'
import { zbOptions, lineOptions } from './chartOptions'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

const ZB_COLOR = ['#d12159', '#ffff43']

export default {
  name: 'history-verify-xsysms',
  components: {
    ELine: () => import('@/commons/charts/ELine')
  },
  data() {
    return {
      showLoading: false,
      xsyqmsData: {},
      lineData: null,
      playLoading: false,
      timer: null
    }
  },
  computed: {
    ...mapState(['qcycstForm', 'xxlhList']),
    elineId() {
      return nanoid()
    },
    zbId() {
      return nanoid()
    },
    zbData() {
      const { drawnames = [], draelines = [] } = this.xsyqmsData
      if (isEmpty(drawnames) && isEmpty(draelines)) {
        return null
      }
      let _jlAxiasMin = 0
      const _jlSerList = []
      const _jlAxiasList = []
      each(draelines, item => {
        _jlSerList.push({
          type: 'line',
          step: 'end',
          data: item,
          lineStyle: {
            color: '#25f3e6'
          },
          itemStyle: {
            color: '#25f3e6'
          }
        })
      })
      each(drawnames, (item, index) => {
        const [_a, _b, _c, _d, _e] = item
        if (index === 0) {
          _jlAxiasMin = _a
        }
        if (_a < _jlAxiasMin) {
          _jlAxiasMin = _a
        }
        _jlAxiasList.push({
          name: _c + '',
          value: [_a, _b, _c],
          label: {
            show: true,
            formatter: function(params) {
              return _d
            },
            position: 'left',
            color: ZB_COLOR[_e % 2]
          }
        })
      })
      return merge({}, zbOptions, {
        xAxis: {
          min: _jlAxiasMin
        },
        series: concat(_jlSerList, {
          type: 'line',
          data: _jlAxiasList,
          lineStyle: {
            color: '#31597d'
          },
          itemStyle: {
            color: '#31597d'
          }
        })
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    this.loadData()
  },
  methods: {
    ...mapActions(['loadXsyqmsData']),
    async loadData() {
      this.showLoading = true
      const _list = []
      each(this.xxlhList, item => {
        _list.push({
          startTime: head(item).name,
          endTime: last(item).name
        })
      })
      let _obj = {}
      const { min, max } = this.qcycstForm
      if (min !== max) {
        _obj = {
          maxUsageAll: max,
          minUsageAll: min
        }
      }
      const { code, date } = await this.loadXsyqmsData({
        ..._obj,
        list: _list
      })
      this.showLoading = false
      if (code === 200) {
        this.xsyqmsData = date
        this.modifyELineData(date.parallel)
      }
    },
    modifyELineData(list = []) {
      const parallel = list
      if (isEmpty(parallel)) {
        return null
      }
      const _zxSerList = []
      const _zxlegendList = []
      const _zxAxiasList = []
      each(parallel, item => {
        _zxSerList.push({
          type: 'line',
          ...item
        })
        _zxlegendList.push(item.name)
      })
      for (let i = 0; i < 24; i++) {
        _zxAxiasList.push(i + ':00')
      }
      this.lineData = merge({}, lineOptions, {
        legend: {
          data: _zxlegendList
        },
        xAxis: {
          type: 'category',
          data: _zxAxiasList
        },
        series: _zxSerList
      })
    },
    handleElinePlay() {
      const { parallel } = this.xsyqmsData
      const _len = parallel.length
      let _num = 0
      const _li = []
      if (_len > 1) {
        this.playLoading = true
        this.timer = setInterval(() => {
          if (_num >= _len) {
            this.playLoading = false
            clearInterval(this.timer)
            this.$Notice.success({
              title: '提示信息',
              desc: '播放结束'
            })
          } else {
            _li.push(parallel[_num])
            this.modifyELineData(_li)
            _num++
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.xsyqms-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .top-wrap,
  .bottom-wrap {
    flex: 1;
  }
  .top-wrap {
    position: relative;
    margin-bottom: 5px;

    .play-btn {
      position: absolute;
      top: 7px;
      right: 10px;
    }
  }
}
</style>
